package examples.photo_swipe.views;

import js.Dom;
import divtastic.Enumerables;
import divtastic.js.DisplayDiv;
import divtastic.js.Divtastic;
import divtastic.Pages;
import divtastic.js.application.views.WindowView;
import divtastic.js.application.views.SwipeView;
using divtastic.js.Drawing;
class PicSwipeView
{
    
    
    
    private var _holder:        DisplayDiv;
    private var _win:           WindowView;
    private var pageImages:     Pages<String>;
    private var texts:          Array<String>;
    private var swipeView:      SwipeView;
    private var imageHolderTxt: DisplayDiv;
    private var innerTxt:       DisplayDiv;
    
    
    
    public function new( holder_: DisplayDiv, win_: WindowView )
    {
        
        _holder     = holder_;
        _win        = win_;
        var images  =   [ ];
        texts       =   [ ];
            
            for( i in images )
            {
                new DisplayDiv( i );
            }
            pageImages = new Pages( images );
            pageImages.goto( 6 );
            pageImages.circle = true;
            
            
            var imageHolder                     = new DisplayDiv( pageImages.curr );
            imageHolder.x                   = 10;
            imageHolder.y                   = 36;
            imageHolder.width               = 300;
            imageHolder.height              = 400;
            var imageOld                        = new DisplayDiv( );
            imageOld.x                      = 10;
            imageOld.y                      = 36;
            imageOld.width                  = 300;
            imageOld.height                 = 400;
            var inner                           = new DisplayDiv( );
            inner.width                     = 300;
            inner.height                    = 400;
            inner.x                         = 0;
            inner.y                         = 0;
            imageOld.addChild( inner );
            _holder.addChild( imageOld );
            _holder.addChild( imageHolder );

            imageHolderTxt                  = new DisplayDiv();

            var txStyle                     = imageHolderTxt.getStyle();
            imageHolder.addChild( imageHolderTxt );
            imageHolderTxt.x                = 25;
            imageHolderTxt.y                = 259;        
            imageHolderTxt.height           = 1000;
            imageHolderTxt.width            = 200;
            txStyle.fontFamily              = 'Monaco';
            txStyle.color                   = '#000000';
            txStyle.lineHeight              = '1.1';
            txStyle.letterSpacing           = '1px';
            txStyle.fontSize                = '9'; 
            imageHolderTxt.fixedTextHeight  = 100;
            imageHolderTxt.fixedTextWidth   = 250;
            imageHolderTxt.updateText( texts[ pageImages.getIndex() ] );
            
            innerTxt                        = new DisplayDiv();
            inner.addChild( innerTxt );//innerTxt.fill = '#ccffcc';*/*/*/
            innerTxt.x                      = 25;
            innerTxt.y                      = 259;
            innerTxt.height                 = 1000;
            innerTxt.width                  = 200;
            innerTxt.fixedTextHeight        = 1000;
            innerTxt.fixedTextWidth         = 250;
            innerTxt.updateText( '' );
            innerTxt.width                  = 0;
            var txStyle2                    = innerTxt.getStyle();
            txStyle2.fontFamily             = 'Monaco';
            txStyle2.color                  = '#000000';//'#d67297';
            txStyle2.lineHeight             = '1.1';
            txStyle2.letterSpacing          = '1px';
            txStyle2.fontSize               = '9';
            
            swipeView = new SwipeView( Horizontal, 300, imageHolder, imageOld, inner, pageImages );
            swipeView.pageChange.add( updateText );
            createNav();
            
        }
        
        
        private function updateText()
        {
            
            imageHolderTxt.updateText( texts[ swipeView.index1 ] );
            innerTxt.updateText( texts[ swipeView.index0 ] );
            
        }
        
        
        private function createNav(): HtmlDom
        {

            var nav              = new DisplayDiv();
            nav.x                                          = 0;
            nav.y                                          = 300;
            nav.width                                      = 300;
            nav.height                                     = 100;
            nav.visible                                    = true;
            _holder.addChild( nav );
            createLeftArrow( nav );
            createRightArrow( nav );
            return nav.getInstance();
            
        }
        
        
        private function createLeftArrow( aTab: DisplayDiv ): HtmlDom
        {
            
            var left   = new DisplayDiv();
            left.x                            = 5;
            left.y                            = 0;
            aTab.addChild( left );
            var grey6       = 0x666666;
            var grey36      = 0x363636;
            left.drawGradTriangle( 4, 4, 12, 15, grey36, grey6, East, 1, Horizontal );
            left.getStyle().cursor = 'pointer';
            left.setPress( pageImages.next ) ;
            return left.getInstance() ;
            
        }
        
        
        private function createRightArrow( aTab: DisplayDiv ): HtmlDom
        {
            
            var right  = new DisplayDiv();
            right.x                            = 295;
            right.y                            = 0;
            aTab.addChild( right );
            var grey6       = 0x666666;
            var grey36      = 0x363636;
            right.drawGradTriangle( 4, 4, 12, 15, grey36, grey6, West, 1, Horizontal );
            right.getStyle().cursor = 'pointer' ;
            right.setPress( pageImages.previous ) ;
            return right.getInstance() ;
            
        }
        
        
}